<template>
  <div class="app-container">
    <div class="box-server">
      <el-row :gutter="24" class="box-elrow">
         <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="params.maxNums" @change="Reasonlist"
                       placeholder="举报原因">
              <el-option v-for="item in options3"
                         :key="item.id"
                         :label="item.cate_name"
                         :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
         <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="params.is_all_banned" @change="handleFilter"
                       placeholder="处理状态">
              <el-option v-for="item in options4"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="form"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']">
            </el-date-picker>
        <!-- <el-date-picker v-model="form.startTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                        :picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入开始时间'"></el-date-picker>
      <el-date-picker v-model="form.endTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"
                        :picker-options="endDatePicker"  :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入结束时间'"></el-date-picker> -->
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-input v-model="params.searchWord"
                      placeholder="用户ID/昵称/手机号" @keyup.enter.native="handleFilter"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="handleFilter()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="box-data">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width:100%;"
                  border
                  height="650px"
                  center
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection">
          </el-table-column>

          <el-table-column prop="user_id"
                           label="举报者用户ID">
          </el-table-column>
          <el-table-column prop="user.nickname"
                           label="举报者昵称">
          </el-table-column>
          <el-table-column  label="被举报者用户ID" prop="other_uid">
          </el-table-column>
          <el-table-column prop="other_user.nickname"
                           label="被举报者昵称">
          </el-table-column>
          <el-table-column prop="cate.cate_name"
                           label="举报原因">
          </el-table-column>
          <el-table-column prop="is_allow" :show-overflow-tooltip="true"
          :formatter="is_allow"
                           label="聊天证据">
          </el-table-column>
          <el-table-column prop="is_all_banned" label="图片证据">
          </el-table-column>
          <el-table-column prop="created_at"
                           label="举报时间">
          </el-table-column>
          <el-table-column label="操作"
                           width="700">
            <template slot-scope="scope">
                <el-button size="mini"
                         type="danger"
                         @click="Forbiddenwords(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="Membermanagement(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box-page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="parseInt(params.pageNum)"
                       :page-sizes="[3, 5, 15, 30]"
                       :page-size="parseInt(params.page)"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="parseInt(params.total)">
        </el-pagination>
      </div>
    </div>
    <div>
          <el-dialog title="查看详情"
               :visible.sync="ForbiddenwordsVisible" style="height:calc(100% - 100px)" width="35%"> 
        <div>
           <div class="box-left">
              <div class="box-leftHeight">
              <label for="">举报者:</label>
              <div>用户ID:{{userFrom.user_id}}</div>
              <div>昵称:</div>
              <label for="">被举报者:</label>
              <div>用户ID:{{userFrom.other_uid}}</div>
              <div>昵称:</div>
              <label for="">聊天证据:{{userFrom.note}}</label>
               <div class="infinite-list-wrapper" style="height:300px; overflow:auto;">
                    <div
                      class="list"
                      v-infinite-scroll="load"
                      infinite-scroll-disabled="disabled">
                      <div class="boxData" v-for="item in formdata"
                         :key="item">
                        <div class="box-li"></div>
                        <div class="box-lis">
                          <div class="boxliszi">
                            <div>{{item.list}}</div>
                            <div>{{item.list1}}</div>
                          </div>
                           <div class="box-lis1">{{item.list2}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <label for="">图片证据:</label>
                  
                  <div class="demo-image__lazy" style="height:330px;overflow:auto" >
                    <el-image v-for="url in urls" :key="url" :src="url.img" lazy></el-image>
                  </div>
              </div>
              <div class="boxjubao">
                <label for="">举报说明:</label>
                  <div></div>
              </div>
          </div>
        </div>
    </el-dialog>
    </div>
    <div class="box-dialog">
       <el-dialog title="编辑" width="80%"
               :visible.sync="elideVisible" class="box-edit">
        <div class="box-content">
          <div class="box-left">
              <div class="box-leftHeight">
              <label for="">举报者:</label>
              <div>用户ID:</div>
              <div>昵称:</div>
              <label for="">被举报者:</label>
              <div>用户ID:</div>
              <div>昵称:</div>
              <label for="">聊天证据:</label>
               <div class="infinite-list-wrapper" style="height:300px; overflow:auto;">
                    <div
                      class="list"
                      v-infinite-scroll="load"
                      infinite-scroll-disabled="disabled">
                      <div class="boxData" v-for="item in formdata"
                         :key="item">
                        <div class="box-li"></div>
                        <div class="box-lis">
                          <div class="boxliszi">
                            <div>{{item.list}}</div>
                            <div>{{item.list1}}</div>
                          </div>
                           <div class="box-lis1">{{item.list2}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <label for="">图片证据:</label>
                  <div class="demo-image__lazy" style="height:330px;overflow:auto">
                    <el-image v-for="url in urls" :key="url" :src="url.img" ></el-image>
                  </div>
                  <div>
                <div class="boxjubao">
                    <label for="">举报说明:</label>
                    <div></div>
                </div>
              </div>
              </div>
          </div>
          <div class="box-right">
           <div class="box-proposal">
              <div>
              处理建议:
            </div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="处理状态">
                <el-select v-model="form.region" placeholder="请选择处理状态">
                  <el-option label="处理中" value="shanghai"></el-option>
                  <el-option label="已处理" value="beijing"></el-option>
                  <el-option label="待处理" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input type="textarea" placeholder="备注:" :rows="13" v-model="form.desc"></el-input>
              </el-form-item>
              <el-form-item class="el-formitem">
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
           </div>
           <div class="box-progress">
              <div>处理进度:</div>
              <div class="block" style="padding-top:25px;">
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp">
                    {{activity.content}}
                  </el-timeline-item>
                </el-timeline>
              </div>
           </div>
          </div>
        </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import {reportList,reportCateList}  from "@/api/user"; 
export default {

  data() {
    return {
      reverse: true,
      userFrom:{
      user_id:"",
      other_uid:"",
      note:""
      },
        activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }],
      count: 10,
        loading: false,
      form:{
        startTime:"",
        endTime:"",
        region:"",
        desc:""
      },
      urls: [
         {
            img:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
         },
         {
            img:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
           
         },
          {
            img:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
           
         }, {
            img:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
           
         }
        ],
      formdata:[{
        list:"叶子",
        list1:" 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼",
        list2:"11:36"
      },{
        list:"叶子",
        list1:" 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼",
        list2:"11:36"
      },{
        list:"叶子",
        list1:" 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼",
        list2:"11:36"
      },{
        list:"叶子",
        list1:" 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼",
        list2:"11:36"
      }],
      dialogStatus:"",
      ForbiddenwordsVisible:false,
      elideVisible:false,
      downloadLoading:false,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
       gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      resetForm:{
        type:""
      },
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        cellphone: "",
        region: "",
        official: "",
        password: "",
        value1: "",
      },
      options: [{
        value: '0',
        label: '不允许'
      }, {
        value: '1',
        label: '允许'
      }],
       options3: [],
      options4:[{value:"1",label:"待处理"},{value:"2",label:"处理中"},{value:"3",label:"已处理"}],
      input: "",
      tableData: [],
      multipleSelection: [],
      params:{
        status:"",
        searchWord:"",
        cate_id:"",
        page:"",
        pageNum:"",
        timeStart:"",
        timeEnd:"",
        total:"",
      },
    }

  },
  created(){
    this.list();
    this.Reasonlist();
  },
  methods: {
     load () {
        this.count += 2
      },
      // form提交
      onSubmit(){
        console.log("res");
      },
    // 列表渲染
      handleFilter(val){
      this.params.page=val;
      this.list();
    },
    search(){
      this.params.open="";
      this.params.searchWord=""
      this.list();
    },
    handleFiltersearch(val){
      this.param.page=val; 
      this.chengyuan();
    },
    handleSizeChange1(val){
      consoloe.log(val);
       this.param.pageNum=val;
      this.chengyuan();
    },
    handleCurrentChange1(val){
      this.param.page=val;
      this.chengyuan();
    },
       statusformatters(row,column){
        const lists= row.status;
         if(lists==0){
        return "正常"
      }else if(lists==1){
        return "删除"
      }else if(lists==2){
        return "拉黑"
      }else if(lists==3){
        return "禁言"
      }
      },
      is_auditstatus(row,column){
       const statusdit= row.is_audit;
        if(statusdit==1){
            return "需要"
        }else if(statusdit==0){
          return "不需要"
        }
      },
      is_allow(row,column){
      const statusdit= row.is_allow;
        if(statusdit==1){
            return "允许"
        }else if(statusdit==0){
          return "不允许"
        }
      },
    list(){
      this.loading=false;
      reportList(this.params).then((response)=>{
          console.log(response)
          const niname = response.data.content;
          // console.log(niname)
          // niname.map((item)=>{
          //   returnitem.nickname
          // })
          this.tableData=response.data;
      })
      // groupLists(this.params).then((response)=>{
      //   this.tableData=response.data;
      //   response.data.map((item)=>{
      //     console.log(item);
      //     this.headimg=item.group_manager.headimg;
      //     console.log(this.headimg)
      //   })
      //   this.params.page=response.summary.page;
      //   this.params.pageNum=response.summary.pagesize;
      //   this.params.total=response.summary.total;
      // })
    },
    Membermanagement(){
      this.elideVisible=true;
    },
    
    Reasonlist() {
      reportCateList()
        .then(response => {
          console.log(response.data)
          this.options3=response.data;
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    Forbiddenwords(row,value){
      console.log(value);
      this.userFrom.user_id=value.user_id;
      this.userFrom.other_uid=value.other_uid;
      this.ForbiddenwordsVisible=true;

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogFormVisible=true;
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.params.pageNum=val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.page=val;
      this.list();
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 时间
    beginDate(){
  const self = this
  return {
    disabledDate(time){
      if (self.form.endTime) {  //如果结束时间不为空，则小于结束时间
        return new Date(self.form.endTime).getTime() < time.getTime()
      } else {
        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
      }
    }
  }
},
processDate() {
  const  self = this
  return {
    disabledDate(time) {
      if (self.form.startTime) {  //如果开始时间不为空，则结束时间大于开始时间
        return new Date(self.form.startTime).getTime() > time.getTime()
      } else {
        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
      }
    }
  }
}
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }

  .el-select {
    width: 100%;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
}
.pr {
  padding-top: 12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
.prtop{
  margin-bottom:12px;
}
.box-content{
  display: flex;
.box-right{
  flex:6;
  border-radius:8px;
  padding-left:8px;
 .el-formitem{
   display:flex;
   justify-content: right;
 }
 ::v-deep.el-textarea__inner{
   resize: none !important;
 }
 .box-proposal{
   height: 450px;
   border:1px solid #d1cbcb;
  border-radius:8px;
  padding:16px 16px 16px 16px;
 }
 .box-progress{
   margin-top:20px;
  height:calc(100% - 470px);
  border:1px solid #d1cbcb;
  border-radius:8px;
  padding:16px 16px 16px 16px;
 }
}
.Chatevidence{
   
}


}
.list{
  .boxData{
    display: flex;
    padding-top: 16px;
    // align-content: center;
     .box-li{
      width:35px;
      height:35px;
      background-color:#d7d7d7;
      border-radius:5px;
    }
    .box-lis{
      display:flex;
      justify-content: space-between;
      padding:0px 12px 12px 12px;
      width:calc(100% - 35px);
      // height:35px;
      border-bottom:1px  solid #e3d8d8;
      .boxliszi{
      }
    }
    .box-lis1{
      width:80px;
      height: 35px;
      // background-color:#d7d7d7;
      border-radius: 5px;
    }
  }

} 
.box-left{
  flex:4;
  border:1px solid #d1cbcb;
  border-radius:8px;
  padding:16px 16px;
  .box-leftHeight{
    height:100%;
  }
}
  .box-data {
    padding: 16px 16px 16px 16px;
  }
.box-dialog{
::v-deep.el-dialog__wrapper .el-dialog{
    position: relative;
    margin-top:0px !important;
    left: 100px;
    height:100%;
    overflow-y: auto;
    width: calc(100% - 200px) !important;
   
}
.boxjubao{
  height:calc(100% - 660px)
}
::v-deep.el-dialog__body{
      height:calc(100% - 54px) !important;
    }
  .box-content{
    height:100%;
  }
}


</style>

